<!DOCTYPE html>
<html>
  <head>
    <title>behaviour-Collision</title>
    <meta
      name="viewport"
      id="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta charset="utf-8" />
    <style type="text/css">
      body {
        background-color: #333333;
        margin: 0px;
        overflow: hidden;
      }

      .shadow {
        box-shadow: 0 0 25px #000;
      }

      #container {
        width: 1003px;
        height: 610px;
        margin-top: 50px;
        margin-left: -501px;
        left: 50%;
        position: absolute;
      }

      #canvas {
        background: #007ac5;
      }
    </style>
  </head>

  <body>
    <div id="container" class="shadow">
      <canvas id="canvas"></canvas>
    </div>
    <script src="../../lib/requestAnimationFrame.min.js"></script>
    <script src="../../lib/stats.min.js"></script>
    <script src="//localhost:3001/build/proton.js"></script>
    <script>
      var canvas;
      var context;
      var proton;
      var renderer;
      var emitter;
      var stats;

      main();

      function main() {
        initCanvas();
        addStats();
        createProton();
        createMiniEmitter();
        tick();
      }

      function initCanvas() {
        canvas = document.getElementById("canvas");
        canvas.width = 1003;
        canvas.height = 610;
        context = canvas.getContext("2d");
      }

      function addStats() {
        stats = new Stats();
        stats.setMode(2);
        stats.domElement.style.position = "absolute";
        stats.domElement.style.left = "0px";
        stats.domElement.style.top = "0px";
        document.getElementById("container").appendChild(stats.domElement);
      }

      function createProton() {
        proton = new Proton();
        emitter = new Proton.Emitter();
        emitter.rate = new Proton.Rate(
          new Proton.Span(8, 16),
          new Proton.Span(0.5, 1)
        );

        emitter.addInitialize(new Proton.Mass(1));
        emitter.addInitialize(new Proton.Radius(1, 40));
        emitter.addInitialize(new Proton.Life(5, 6));
        emitter.addInitialize(
          new Proton.Velocity(
            new Proton.Span(3, 5),
            new Proton.Span(0, 20, true),
            "polar"
          )
        );

        emitter.addBehaviour(new Proton.Alpha(1, 0));
        emitter.addBehaviour(
          new Proton.Color([
            "#36aaf3",
            "#fd769c",
            "#94ff22",
            "#ffa545",
            "#ffffff"
          ])
        );
        emitter.addBehaviour(new Proton.Scale(1));
        emitter.addBehaviour(new Proton.Gravity(4));
        emitter.addBehaviour(new Proton.Collision(emitter));
        emitter.addBehaviour(customDeadBehaviour());
        emitter.addBehaviour(
          new Proton.CrossZone(
            new Proton.RectZone(0, 0, canvas.width, canvas.height),
            "bound"
          )
        );

        emitter.p.x = canvas.width / 2;
        emitter.p.y = canvas.height / 2;
        emitter.emit();
        proton.addEmitter(emitter);

        renderer = new Proton.CanvasRenderer(canvas);
        renderer.onProtonUpdate = function() {
          context.fillStyle = "rgba(0, 122, 197, 0.2)";
          context.fillRect(0, 0, canvas.width, canvas.height);
        };
        proton.addRenderer(renderer);
      }

      function customDeadBehaviour() {
        return {
          initialize: function(particle) {},
          applyBehaviour: function(particle) {
            if (particle.p.y + particle.radius >= canvas.height) {
              if (particle.radius > 9) {
                miniEmitteing(particle);
                particle.dead = true;
              }
            }
          }
        };
      }

      function createMiniEmitter() {
        miniEmitter = new Proton.Emitter();
        miniEmitter.rate = new Proton.Rate(
          new Proton.Span(3, 6),
          new Proton.Span(1, 2)
        );
        miniEmitter.addInitialize(new Proton.Mass(1));
        miniEmitter.radiusInitialize = new Proton.Radius();
        miniEmitter.addInitialize(miniEmitter.radiusInitialize);
        miniEmitter.addInitialize(new Proton.Life(0.5, 1));
        miniEmitter.addInitialize(
          new Proton.V(
            new Proton.Span(1.5, 3),
            new Proton.Span(0, 70, true),
            "polar"
          )
        );

        miniEmitter.colorBehaviour = new Proton.Color("#ffffff");
        miniEmitter.addBehaviour(new Proton.Alpha(1, 0));
        miniEmitter.addBehaviour(miniEmitter.colorBehaviour);
        miniEmitter.addBehaviour(new Proton.Gravity(4));
        miniEmitter.addBehaviour(new Proton.Collision(miniEmitter));
        miniEmitter.addBehaviour(
          new Proton.CrossZone(
            new Proton.RectZone(0, 0, canvas.width, canvas.height),
            "bound"
          )
        );
        proton.addEmitter(miniEmitter);
      }

      function miniEmitteing(particle) {
        miniEmitter.radiusInitialize.reset(
          particle.radius * 0.05,
          particle.radius * 0.2
        );
        miniEmitter.colorBehaviour.reset(particle.color);
        miniEmitter.p.x = particle.p.x;
        miniEmitter.p.y = particle.p.y;
        miniEmitter.emit("once");
      }

      function tick() {
        requestAnimationFrame(tick);

        stats.begin();
        proton.update();
        stats.end();
      }
    </script>
  </body>
</html>
